<script setup>
import { ref , onMounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import ImageLayer from "ol/layer/Image";
import { ImageArcGISRest } from "ol/source";
const map = ref()

const initMap = () => {

  const imageLayer = new ImageLayer({
    // 图片加载图层
    source: new ImageArcGISRest({
      ratio: 1, // 控制图像分辨率比例
      params: {}, // 传递给ArcGIS服务的额外参数
      url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer',
    }),
    opacity: 1,//透明度
    visible: true,//图层的可见性，不可见图层不再请求数据
    extent: [-18372064.265054375, 642477.8989716391, -3622231.734945626, 8495720.10102836],//图层渲染范围,该层将不会在此范围之外渲染。
    zIndex: 1,//图层渲染的级别，跟css样式的dom渲染级别是一样的，层级越大就显示在上一层
    properties: {
      a: "aaa"
    }
  })

  map.value = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
        zIndex: 0
      }),
      imageLayer
    ],
    view: new View({
      center: [-10997148, 4569099],
      zoom: 4,
    })
  })
}

onMounted(() => {
  initMap()
})
</script>

<template>
  <div id="map"></div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 100%;
}
</style>